<template>
 <div class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
      <div class="userMsg">
          <CrossLine></CrossLine>
              <ul style="background:#fff;" >
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span class="usertit">职业</span>
                          <span class="userpams" >{{decodeloanInfo.professionValue}}</span>
            </a>
          </li>
          <li class="mui-table-view-cell" >
            <a class="mui-navigate-right">
              <span class="usertit" >征信记录</span>  
                          <span  class="userpams" >{{decodeloanInfo.creditValue}}</span>
            </a>
          </li>
          <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span class="usertit">住房状态</span>
              <span  class="userpams" >{{decodeloanInfo.housingValue[0]}}</span>
              <!-- <span  class="icon-fanhui"></span> -->
            </a>
          </li>
          <li class="mui-table-view-cell"v-show="decodeloanInfo.housingValue.length > 1" v-for="(housingValue,index) in decodeloanInfo.housingValue">
            <a class="mui-navigate-right">
              <span  class="userpams" >{{decodeloanInfo.housingValue[index]}}</span>
            </a>
          </li>
                  <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span class="usertit">社保</span>  
                          <span  class="userpams">{{decodeloanInfo.securityValue}}</span>
            </a>
          </li>
                  <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span class="usertit">公积金</span>  
                          <span  class="userpams" style="">{{decodeloanInfo.fundValue}}</span>
            </a>
          </li>
              <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
              <span class="usertit">月收入范围</span>  
                          <span  class="userpams" style="">{{decodeloanInfo.incomeValue}}</span>
            </a>
          </li>
        </ul>      
      </div>
    </div>
  </div>
</template>

<script>
    import CrossLine from '@/components/base/cross-line/cross-line'
    import storage from '@/utils/localstorage'
    import mui from 'static/js/mui'
    export default {
        data() {
            return{
                loanInfo: {
                  professionValue:'',
                  creditValue:'',
                  housingValue:[],
                  securityValue:'',
                  fundValue:'',
                  incomeValue:'',
                },
                decodeloanInfo: {
                  professionValue:'',
                  creditValue:'',
                  housingValue:[],
                  securityValue:'',
                  fundValue:'',
                  incomeValue:'',
                }
            }
        },
        components: {
            CrossLine,
        },
        props: {},
        methods: {
           
        },
        filters: {},
        computed: {},
        created() {
          this.loanInfo = JSON.parse(storage.getLocalstorage('loanInfo'))
          switch(this.loanInfo.professionValue){
            case '0':
              this.decodeloanInfo.professionValue = '公务员、事业单位'
              break
            case '1':
              this.decodeloanInfo.professionValue = '企业主'
              break
            case '2':
              this.decodeloanInfo.professionValue = '个体户'
              break
            case '3':
              this.decodeloanInfo.professionValue = '上班族'
              break
            case '4':
              this.decodeloanInfo.professionValue = '自由职业者'
              break
            case '5':
              this.decodeloanInfo.professionValue = '其他'
              break
          }
          switch(this.loanInfo.creditValue){
            case '0':
              this.decodeloanInfo.creditValue = '信用良好(无逾期)'
              break
            case '1':
              this.decodeloanInfo.creditValue = '1-3次逾期'
              break
            case '2':
              this.decodeloanInfo.creditValue = '3-6次逾期'
              break
            case '3':
              this.decodeloanInfo.creditValue = '6-9次逾期'
              break
            case '4':
              this.decodeloanInfo.creditValue = '9次以上逾期'
              break
          }
          switch(this.loanInfo.securityValue){
            case '0':
              this.decodeloanInfo.securityValue = '有社保(6个月以上)'
              break
            case '1':
              this.decodeloanInfo.securityValue = '有社保(6个月以下)'
              break
            case '2':
              this.decodeloanInfo.securityValue = '无社保'
              break
          }
          switch(this.loanInfo.fundValue){
            case '0':
              this.decodeloanInfo.fundValue = '有公积金(6个月以上)'
              break
            case '1':
              this.decodeloanInfo.fundValue = '有公积金(6个月以下)'
              break
            case '2':
              this.decodeloanInfo.fundValue = '无公积金'
              break
          }
          switch(this.loanInfo.incomeValue){
            case '0':
              this.decodeloanInfo.incomeValue = '3000元以下'
              break
            case '1':
              this.decodeloanInfo.incomeValue = '3000-5000元'
              break
            case '2':
              this.decodeloanInfo.incomeValue = '5000-8000元'
              break
            case '3':
              this.decodeloanInfo.incomeValue = '8000元-12000元'
              break
            case '4':
              this.decodeloanInfo.incomeValue = '12000元-20000元'
              break
            case '5':
              this.decodeloanInfo.incomeValue = '20000元以上'
              break
          }
          //console.log( this.loanInfo.housingValue)
          for(var i in this.loanInfo.housingValue){
            //console.log(i)
            switch(i){
              case '0':
                this.decodeloanInfo.incomeValue = '自有全款(本地)'
                break
              case '1':
                this.decodeloanInfo.incomeValue = '自有全款(本地无，省内有房产)'
                break
              case '2':
                this.decodeloanInfo.incomeValue = '自有全款(本地无，省内有房产)'
                break
              case '3':
                this.decodeloanInfo.incomeValue = '自有贷款(本地无，省内有房)'
                break
              case '4':
                this.decodeloanInfo.incomeValue = '自有贷款(本地无，省内有房)'
                break
              case '5':
                this.decodeloanInfo.incomeValue = '自有贷款(本地无，省内有房)'
                break
              case '6':
                this.decodeloanInfo.incomeValue = '父母贷款房产(本地)'
                break
              case '7':
                this.decodeloanInfo.incomeValue = '父母贷款房产(本地无，省内有房产)'
                break
              case '8':
                this.decodeloanInfo.incomeValue = '租赁'
                break
            }
            this.decodeloanInfo.housingValue.push(this.decodeloanInfo.incomeValue)
          }
          //console.log(this.decodeloanInfo.housingValue)
        },
        mounted() {
          mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
             //竖向滚动
            scroll = mui('.mui-scroll-wrapper').scroll({
                scrollY: true, //是否竖向滚动
                scrollX: false, //是否横向滚动
                startX: 0, //初始化时滚动至x
                startY: 0, //初始化时滚动至y
                indicators: true, //是否显示滚动条
                deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
                bounce: true //是否启用回弹
            });
        }
    };
</script>

<style lang="scss" scoped>

    @import '~static/css/mui.picker.min.css'; 
    .userpams{
      float:right;
      color:#999999;
      font-size:0.6rem;
      position:relative;
      top:1px;
    }
    .usertit{
      font-size:0.75rem;
      color:#333333;
    }

    .mui-table-view-cell:after {
      background-color: #E9E9E9;
    }
    .mui-navigate-right:after, .mui-push-right:after {
      right: 15px;
      content: '';
    }
    .mui-bar-nav ~ .mui-content {
      padding-top: 0px;
    }
</style>